<!--
 * @Author: leo
 * @Date: 2024-10-17 13:38:42
 * @LastEditors: leo
 * @Description: 
-->
<!-- list-item.vue -->
<template>
  <div :style="style" ref="domRef">
    <slot name="slot-scope" :data="data"></slot>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ResizeObserver from 'resize-observer-polyfill'

// ResizeObserver兼容低版本浏览器
if (window.ResizeObserver === undefined) {
  window.ResizeObserver = ResizeObserver
}
const emit = defineEmits(['onSizeChange'])

const props = defineProps({
  style: {
    type: Object,
    default: () => {}
  },
  data: {
    type: Object,
    default: () => {}
  },
  index: {
    type: Number,
    default: 0
  }
})

const domRef = ref(null)
const resizeObserver = null

onMounted(() => {
  const domNode = domRef.value.children[0]
  emit('onSizeChange', props.index, domNode)
  const resizeObserver = new ResizeObserver(() => {
    emit('onSizeChange', props.index, domNode)
  })
  resizeObserver.observe(domNode)
})

onUnmounted(() => {
  if (resizeObserver) {
    resizeObserver?.unobserve(domRef.value.children[0])
  }
})
</script>
